<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :inline="true">
					<el-form-item label="代理类型：">
						<el-select v-model="state.tableData.param.agentLevelId" clearable placeholder="全部类型" @change="getTableData()">
							<el-option v-for="item in state.agentLevelIdList" :key="item.agentLevelId" :label="item.agentName"
								:value="item.agentLevelId" />
						</el-select>
					</el-form-item>
					<el-form-item label="邀请人:">
						<el-input v-model="state.tableData.param.keywords" placeholder="请输入邀请人手机、姓名搜索" clearable></el-input>
					</el-form-item>
					<el-form-item label="变更时间">
						<el-date-picker v-model="state.tableData.param.agentReturnTime" type="daterange" unlink-panels
							:shortcuts="shortcuts" format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-"
							:disabled-date="disabledDate" start-placeholder="开始日期" end-placeholder="结束日期" />
					</el-form-item>
					<el-form-item label="代理信息:">
						<el-input v-model="state.tableData.param.keyWords" placeholder="姓名、手机、微信昵称搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getTableData()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" v-loading="state.tableData.loading">

						<el-table-column label="个人信息" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div>
										{{ scope.row.returnAgentName }}
									</div>
									<div>
										{{ scope.row.returnAgentPhone }}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="当前上级" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div>
										{{ scope.row.rawAgentSuperiorName }}
									</div>
									<div>
										{{ scope.row.rawAgentSuperiorPhone }}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="邀请人" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div>
										{{ scope.row.agentInviterName }}
									</div>
									<div>
										{{ scope.row.agentInviterPhone }}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="变更前上级" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div>
										{{ scope.row.beforeAgentSuperiorName }}
									</div>
									<div>
										{{ scope.row.beforeAgentSuperiorPhone }}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="变更时间" show-overflow-tooltip>
							<template #default="scope">
								<span>{{ formatDate(new Date(scope.row.agentChangeTime), 'YYYY-mm-dd HH:MM:SS') }}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" width="100">
							<template #default="scope">
								<el-button text type="primary" @click="onManually( scope.row)">手动回归</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
								background v-model:page-size="state.tableData.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { agentList, getAgentReturnList,agentReturnManually } from "/@/api/agent";

import { formatDate } from '/@/utils/formatTime';

// 引入组件

// 定义变量内容
const disabledDate = (time: Date) => time.getTime() > Date.now();

const shortcuts = [
	{
		text: '本月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.setDate(1))
			return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
			return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
			return [start, end]
		},
	},
]

const state = reactive<any>({

	tableData: {

		data: [],
		total: 0,
		loading: false,
		param: {
			keywords: "",//姓名、手机、微信昵称搜索
			agentLevelId: "",//代理级别id
			InviterKeywords: "",//邀请人手机、姓名
			agentReturnTime: "",//变更开始结束时间
			pageNum: 1,
			pageSize: 10,
		},
	},
	agentLevelIdList: []
});
// 获取代理级别
const getAgentList = async () => {
	const { results } = await agentList();
	state.agentLevelIdList = results;
}

// 获取商品列表
const getTableData = async () => {
	state.tableData.loading = true;
	let params = <any>{
		keywords: state.tableData.param.keyWords,
		InviterKeywords: state.tableData.param.InviterKeywords,
		current: state.tableData.param.pageNum,
		size: state.tableData.param.pageSize,
	}
	if (state.tableData.param.agentLevelId != "") {
		params.agentLevelId = state.tableData.param.agentLevelId
	}
	if (state.tableData.param.agentReturnTime != "") {
		params.agentReturnTime = Object.values(state.tableData.param.agentReturnTime)
	}
	console.log(params)

	const { results } = await getAgentReturnList(params);
	state.tableData.loading = false;
	state.tableData.data = results.records;
	state.tableData.total = results.total;
}


// 手动回归
const onManually = (row: any) => {
	ElMessageBox.confirm(`确定手动将该代理改回自动回归吗？?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		state.tableData.loading = true;
		let params = {
			agentInfoId:row.agentInfoId
		}
		const { results } = await agentReturnManually(params);
		console.log(results);
		state.tableData.loading = false;
		ElMessage.success('设置成功');
		getTableData();
	}).catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 页面加载时
onMounted(() => {
	getTableData();
	getAgentList()
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;

	.el-table {
		flex: 1;

		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
